<template>
    <footer class="footer">
        <div class="footer-container">
            <!-- Top Section -->
            <div class="footer-top">
                <!-- Social Media Section -->
                <!-- <div class="social-section">
                    <h3 class="social-title">Follow Us</h3>
                    <div class="social-icons">
                        <a
                            href="#"
                            class="social-icon"
                            aria-label="Facebook">
                            <img
                                src="/newHome/footer/footer_icon_1.png"
                                alt="Facebook"
                                class="social-icon-img" />
                        </a>
                        <a
                            href="#"
                            class="social-icon"
                            aria-label="Instagram">
                            <img
                                src="/newHome/footer/footer_icon_2.png"
                                alt="Instagram"
                                class="social-icon-img" />
                        </a>
                        <a
                            href="#"
                            class="social-icon"
                            aria-label="LinkedIn">
                            <img
                                src="/newHome/footer/footer_icon_3.png"
                                alt="LinkedIn"
                                class="social-icon-img" />
                        </a>
                        <a
                            href="#"
                            class="social-icon"
                            aria-label="YouTube">
                            <img
                                src="/newHome/footer/footer_icon_4.png"
                                alt="YouTube"
                                class="social-icon-img" />
                        </a>
                        <a
                            href="#"
                            class="social-icon"
                            aria-label="Twitter">
                            <img
                                src="/newHome/footer/footer_icon_5.png"
                                alt="Twitter"
                                class="social-icon-img" />
                        </a>
                    </div>
                </div> -->

                <!-- Divider -->
                <div class="divider"></div>

                <!-- Navigation Section -->
                <div class="nav-section">
                    <div class="nav-columns">
                        <div
                            v-for="navItem in footerNavData"
                            :key="navItem.key"
                            class="nav-column">
                            <h4 class="nav-title">{{ navItem.title }}</h4>
                            <ul class="nav-links">
                                <li
                                    v-for="link in navItem.links"
                                    :key="link.id">
                                    <a
                                        :href="link.id"
                                        @click="handleFooterLinkClick(navItem, link, $event)">
                                        {{ link.label }}
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- Logo Section -->
                    <div class="logo-section">
                        <img
                            class="logo"
                            src="/newHome/footer/footer_logo.png"
                            alt="Logo" />
                    </div>
                </div>
            </div>

            <!-- Copyright Section -->
            <div class="footer-bottom">
                <p class="copyright">
                    Copyright ©2025 FAWA Technology PTE. LTD.
                    <span class="terms-separator"></span>
                    Terms of Service
                </p>
            </div>
        </div>
    </footer>
</template>

<script lang="ts" setup>
    const router = useRouter();
    const route = useRoute();

    // Footer导航数据结构，对应现有的nav-links内容
    const footerNavData = ref([
        {
            key: 'index',
            title: 'Home',
            url: '/',
            links: [
                {
                    label: 'About FAWA',
                    id: '#about-fawa',
                },
                {
                    label: 'Vision',
                    id: '#our-vision',
                },
                {
                    label: 'Mission',
                    id: '#mission',
                },
            ],
        },
        {
            key: 'technology-ecology',
            title: 'Ecology and Technology',
            url: '/technology/ecology',
            links: [
                {
                    label: `FAWA's DAO Governance Framework`,
                    id: '#frameworkId',
                },
                {
                    label: 'The Value of Community Autonomy',
                    id: '#autonomyId',
                },
                {
                    label: `FAWA's Decentralized Social Design`,
                    id: '#decentralizedId',
                },
            ],
        },
        {
            key: 'token-fawa',
            title: 'FAWA TOKEN',
            url: '/token/fawa',
            links: [
                {
                    label: 'Functional Positioning',
                    id: '#functionalPositioningId',
                },
                {
                    label: 'Strategic Value',
                    id: '#strategicValueId',
                },
                {
                    label: 'Allocation Design Logic',
                    id: '#allocationDesignId',
                },
            ],
        },
    ]);

    // 滚动到指定元素的函数，带重试机制
    const scrollToElement = (elementId: string, maxRetries = 10, delay = 100) => {
        const element = document.querySelector(elementId);
        if (element) {
            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        } else if (maxRetries > 0) {
            // 如果元素还没加载，等待一段时间后重试
            setTimeout(() => {
                scrollToElement(elementId, maxRetries - 1, delay);
            }, delay);
        }
    };

    // 处理Footer链接点击事件
    const handleFooterLinkClick = (parentItem: any, linkItem: any, event: Event) => {
        // 阻止默认行为
        event.preventDefault();

        // 如果当前已经在目标页面，直接滚动到元素
        if (route.path === parentItem.url) {
            scrollToElement(linkItem.id);
        } else {
            // 存储目标hash到sessionStorage，供目标页面使用
            if (typeof window !== 'undefined') {
                sessionStorage.setItem('scrollToHash', linkItem.id);
            }

            // 先跳转到页面
            router.push(parentItem.url);
        }
    };

    onMounted(() => {
        // 页面加载完成后，处理滚动定位
        nextTick(() => {
            // 优先检查sessionStorage中的hash（来自跨页面跳转）
            const storedHash = sessionStorage.getItem('scrollToHash');
            if (storedHash) {
                sessionStorage.removeItem('scrollToHash'); // 清除已使用的hash
                setTimeout(() => {
                    scrollToElement(storedHash, 30, 150);
                }, 800); // 给页面更多时间加载
            } else if (route.hash) {
                // 处理URL中的hash
                setTimeout(() => {
                    scrollToElement(route.hash, 20, 200);
                }, 500);
            }
        });
    });

    // 监听路由变化，处理hash定位
    watch(
        () => route.path,
        () => {
            nextTick(() => {
                // 检查是否有待定位的hash
                const storedHash = sessionStorage.getItem('scrollToHash');
                if (storedHash) {
                    sessionStorage.removeItem('scrollToHash');
                    setTimeout(() => {
                        scrollToElement(storedHash, 25, 200);
                    }, 600);
                } else if (route.hash) {
                    setTimeout(() => {
                        scrollToElement(route.hash, 15, 200);
                    }, 300);
                }
            });
        }
    );
</script>

<style lang="scss" scoped>
    // 导入响应式 mixins
    @use '@/styles/mixins/responsive' as *;

    // 通用样式
    * {
        box-sizing: border-box;
    }

    .footer {
        background-color: #000000;
        color: #ffffff;
        overflow: hidden;

        .footer-container {
            max-width: pxToRem(1920);
            margin: 0 auto;
            padding: pxToRem(52) pxToRem(180);
        }

        .footer-top {
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        // 社交媒体部分
        .social-section {
            display: flex;
            align-items: center;
            // gap: pxToRem(64);

            .social-title {
                font-family: 'Figtree', sans-serif;
                font-weight: 700;
                font-size: pxToRem(28);
                line-height: 1.2;
                margin: 0;
                color: #ffffff;
                margin-right: pxToRem(48);
            }

            .social-icons {
                display: flex;
                align-items: center;
                opacity: 0.5;

                .social-icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #ffffff;
                    text-decoration: none;
                    transition: opacity 0.3s ease, transform 0.2s ease;
                    &:not(:last-child) {
                        margin-right: pxToRem(48);
                    }
                    &:hover {
                        opacity: 1;
                        transform: translateY(-2px);
                    }

                    .social-icon-img {
                        display: block;
                        width: pxToRem(36);
                        height: pxToRem(36);
                        object-fit: contain;
                    }
                }
            }
        }

        // 分割线
        .divider {
            width: 100%;
            height: 1px;
            margin: pxToRem(52) 0;
            background-color: rgba(255, 255, 255, 0.1);
        }

        // 导航部分
        .nav-section {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .nav-columns {
                display: flex;
                justify-content: space-between;

                .nav-column {
                    display: flex;
                    flex-direction: column;
                    margin-right: pxToRem(80);
                    text-align: initial;

                    &:last-child {
                        margin-right: 0;
                    }

                    .nav-title {
                        font-family: 'Montserrat', sans-serif;
                        font-weight: 700;
                        line-height: 100%;
                        font-size: pxToRem(28);
                        margin: 0 0 pxToRem(36) 0;
                        color: #ffffff;
                        white-space: nowrap;
                    }

                    .nav-links {
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        display: flex;
                        flex-direction: column;

                        li {
                            margin-bottom: pxToRem(24);
                            // line-height: 100%;

                            &:last-child {
                                margin-bottom: 0;
                            }

                            a {
                                font-family: 'SFProDisplayLight';
                                font-weight: 400;
                                font-size: pxToRem(20);
                                color: rgba(255, 255, 255, 0.6);
                                text-decoration: none;
                                transition: color 0.3s ease;
                                white-space: nowrap;

                                &:hover {
                                    color: #ffffff;
                                }
                            }
                        }
                    }
                }
            }

            // Logo 部分
            .logo-section {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-left: pxToRem(60);

                .logo {
                    display: block;
                    width: pxToRem(284);
                    height: pxToRem(77);
                    object-fit: contain;
                }
            }
        }

        // 版权信息
        .footer-bottom {
            margin-top: pxToRem(96);

            .copyright {
                font-family: 'Inter', sans-serif;
                font-weight: 400;
                font-size: pxToRem(14);
                line-height: 1.5;
                color: #ffffff;
                opacity: 0.5;
                margin: 0;
                text-align: left;

                .terms-separator {
                    margin: 0 pxToRem(20);
                    position: relative;

                    &::before {
                        content: '';
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        width: 1px;
                        height: pxToRem(14);
                        background-color: rgba(255, 255, 255, 0.3);
                    }
                }
            }
        }
    }

    // 响应式设计 - 大屏幕 (1440px及以下)
    @include desktop-small {
        .footer {
            .footer-container {
                padding: pxToRem(20) pxToRem(60);
            }

            .nav-section {
                .nav-columns {
                    .nav-column {
                        // margin-right: pxToRem(20);

                        .nav-title {
                            font-size: pxToRem(24);
                        }

                        .nav-links li a {
                            font-size: pxToRem(16);
                        }
                    }
                }

                .logo-section {
                    margin-left: pxToRem(40);

                    .logo {
                        height: pxToRem(60);
                        width: auto;
                    }
                }
            }

            .footer-bottom {
                margin-top: pxToRem(72);
            }
        }
    }

    // 响应式设计 - 中等屏幕 (1024px及以下)
    @include tablet {
        .footer {
            .footer-container {
                padding: pxToRem(20) pxToRem(40);
            }

            .nav-section {
                .nav-columns {
                    .nav-column {
                        margin-right: pxToRem(20);

                        .nav-title {
                            font-size: pxToRem(22);
                        }

                        .nav-links li a {
                            font-size: pxToRem(14);
                        }
                    }
                }

                .logo-section {
                    margin-left: pxToRem(30);

                    .logo {
                        height: pxToRem(55);
                    }
                }
            }

            .footer-bottom {
                margin-top: pxToRem(60);
            }
        }
    }

    // 响应式设计 - 平板端 (768px及以下)
    @include mobile {
        .footer {
            .footer-container {
                padding: pxToRem75(20);
            }

            .divider {
                margin: pxToRem75(52) 0;
            }

            .nav-section {
                flex-direction: column;
                align-items: flex-start;
                gap: pxToRem75(20);

                .nav-columns {
                    flex-direction: column;
                    width: 100%;

                    .nav-column {
                        margin-right: 0;
                        margin-bottom: pxToRem75(80);
                        text-align: center;

                        .nav-title {
                            font-size: pxToRem75(48);
                            margin-bottom: pxToRem75(30);
                            white-space: initial;
                        }

                        .nav-links li {
                            margin-bottom: pxToRem75(12);

                            a {
                                font-size: pxToRem75(32);
                                white-space: initial;
                            }
                        }
                    }
                }

                .logo-section {
                    align-self: center;
                    margin-left: 0;

                    .logo {
                        width: pxToRem75(284);
                        height: pxToRem75(77);
                    }
                }
            }

            .footer-bottom {
                margin-top: pxToRem75(96);

                .copyright {
                    font-size: pxToRem75(22);
                    text-align: center;
                    line-height: 1.6;

                    .terms-separator {
                        display: block;
                        margin: pxToRem75(8) 0;

                        &::before {
                            display: none;
                        }
                    }
                }
            }

            .social-section {
                flex-direction: column;
                .social-title {
                    font-size: pxToRem(12);
                    margin-right: 0;
                    margin-bottom: pxToRem(12);
                }

                .social-icons {
                    .social-icon {
                        &:not(:last-child) {
                            margin-right: pxToRem(10);
                        }
                        .social-icon-img {
                            width: pxToRem(10);
                            height: pxToRem(10);
                        }
                    }
                }
            }
        }
    }
</style>
